<template>
  <div class="hot">
   <!--轮播图-->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../../imgs/rowing/s1.png" width="100%" alt=""></div>
            <div class="swiper-slide"><img src="../../imgs/rowing/s2.png" width="100%" alt=""></div>
            <div class="swiper-slide"><img src="../../imgs/rowing/s3.png" width="100%" alt=""></div>
            <div class="swiper-slide"><img src="../../imgs/rowing/s4.png" width="100%" alt=""></div>
            <div class="swiper-slide"><img src="../../imgs/rowing/s5.png" width="100%" alt=""></div>
            <div class="swiper-slide"><img src="../../imgs/rowing/s6.png" width="100%" alt=""></div>
            <div class="swiper-slide"><img src="../../imgs/rowing/s7.png" width="100%" alt=""></div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
    <!-- 中间导航 -->
    <hot-nav></hot-nav>
    <!-- 广告位 -->
    <div class="hot-ad">
      <img src="./../../imgs/hot_ad/home_ad.gif" alt="" width="100%">
    </div>
    <!-- 商品的列表 -->
    <hot-shop-list></hot-shop-list>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

import HotNav from './HotNav'
import HotShopList from './HotShopList'

export default {
  name: "Hot",
  components: {
    HotNav,
    HotShopList
  },
  mounted() {
    //创建swiper的实例
    var mySwiper = new Swiper ('.swiper-container', {
    loop: true, // 循环模式选项
    autoplay:true,
    pagination: {
              el: '.swiper-pagination',
    },
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  }
}
</script>
<style lang="stylus" scoped>
.hot{
  width 100%
  height 100%
  background #f5f5f5
  padding-top 46px
  .hot-ad{
    background-color #fff
    margin 8px 0
    padding 5px
  }
}
</style>

